<template>
  <div class="station-op-content">
    <div class="top">
      <div class="top-left">
        <img src="/img/logo_small.7f6fd889.png" />
      </div>
      <div class="top-right">
        <div @click="back"><span class="iconfont icon-ffanhui-"></span>返回</div>
        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <span class="el-icon-user-solid"></span>{{ userInfo.content ? userInfo.content.user_name : '' }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <header>
      <div style="width: 65%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
        <span>当前工站：{{ returnObject.routeName }}</span>
        <!-- <span>工厂：{{ returnObject.factoryName }}</span> -->
        <span>车间：{{ returnObject.workshopName }}</span>
        <span>产线：{{ returnObject.lineName }}</span>
        <span>工位：{{ returnObject.stationName }}</span>
      </div>
      <div class="registerInfo">
        <div class="registerName">
          <span>当前员工：{{ userInfo.content ? userInfo.content.user_name : '' }}</span>
        </div>
        <!-- <el-button type="primary" size="small" icon="el-icon-s-custom" @click="openRegister">员工登记</el-button> -->
      </div>
    </header>
    <div class="designer-section" v-loading="loading" element-loading-text="SOP加载中，请稍后" element-loading-spinner="el-icon-loading">
      <div class="opration-div"></div>
      <!-- 操作日志 -->
      <operation-log ref="operationLog"></operation-log>
    </div>
    <el-dialog append-to-body title="员工登记" :visible.sync="isShowDialog" width="50%" :before-close="handleClose">
      <avue-form id="registerInfoForm" v-model="registerInfoForm" :option="registerInfoOption">
        <template slot-scope="" slot="code">
          <div>
            <el-input name="registerCode" v-model="registerInfoForm.code" @keydown.enter.native="register"></el-input>
          </div>
        </template>
      </avue-form>
      <avue-crud class="registerInfoList" :data="registerInfoList" :option="registerInfoListOption">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-delete" size="small" type="text" @click="registerInfoRowDel(row)">退出</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" icon="el-icon-circle-close" @click="isShowDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows"></common-modal-template>
    <el-button v-if="returnObject.isShowEsop" class="showEsop" type="primary" icon="el-icon-folder-opened" circle @click="showEsop"></el-button>
    <div class="showToolRegiste">
      <div style="width: 100%; height: 100%; position: relative">
        <el-button type="primary" icon="el-icon-s-cooperation" circle @click="showFunctionBoxItem"></el-button>
        <div v-if="showOrHideObj.accessoriesRegister && expiredQuantity > 0" class="externalExpirationTime">{{ expiredQuantity }}</div>
      </div>
    </div>
    <div class="functionBox">
      <el-tooltip class="item" effect="dark" content="设备登记" placement="top-start">
        <el-button v-if="showOrHideObj.equipmentRegister" type="primary" icon="iconfont icon-rizhi1" circle @click="showEquipmentRegister"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="工装治具登记" placement="top-start">
        <el-button v-if="showOrHideObj.toolRegister" type="primary" icon="iconfont icon-wxbgongju" circle @click="showToolRegister"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="辅料登记" placement="top-start">
        <el-button v-if="showOrHideObj.accessoriesRegister" type="primary" icon="iconfont icon-caidanguanli" circle @click="showAccessoriesRegister"></el-button>
      </el-tooltip>
      <div v-if="showOrHideObj.accessoriesRegister && expiredQuantity > 0" class="internalExpirationTime">{{ expiredQuantity }}</div>
      <el-tooltip class="item" effect="dark" content="不良登记" placement="top-start">
        <el-button v-if="showOrHideObj.badRegister" type="primary" icon="el-icon-s-claim" circle @click="showFailureRegister"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="工单上料" placement="top-start">
        <el-button v-if="showOrHideObj.workOrderFeeding" type="primary" icon="iconfont icon-shangliao" circle @click="showWorkOrderFeeding"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="工具上机" placement="top-start">
        <el-button v-if="showOrHideObj.toolOperation" type="primary" icon="iconfont icon-jieruguihuanchuku" circle @click="showToolOperate"></el-button>
      </el-tooltip>
    </div>
    <el-dialog
      class="showEsopDialog"
      v-dragDirectives
      ref="dialog"
      title="查看ESOP"
      append-to-body
      :visible.sync="showEsopDialog"
      :close-on-click-modal="false"
      :fullscreen="true"
    >
      <el-image v-if="esopType == 'img'" style="width: 100%; height: 100%" :src="returnObject.esopUrl" @click="openPreview(0, returnObject.esopUrl)"></el-image>
      <iframe v-if="esopType == 'pdf'" ref="pdf" :src="pdfUrl" width="100%" height="100%"></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showEsopDialog = false"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-dragDirectives
      ref="dialog"
      title="包装称重"
      append-to-body
      :visible.sync="showPackWeightDialog"
      :close-on-click-modal="false"
      width="25%"
      :before-close="packWeightClose"
    >
      <el-form :model="packWeightInfo" label-width="90px" label-position="right">
        <el-form-item label="标准重量:">
          <el-input v-model="packWeightInfo.standardWeight" disabled></el-input>
        </el-form-item>
        <el-form-item label="重量上限:">
          <el-input v-model="packWeightInfo.weightUpper" disabled></el-input>
        </el-form-item>
        <el-form-item label="重量下限:">
          <el-input v-model="packWeightInfo.weightLower" disabled></el-input>
        </el-form-item>
        <el-form-item label="称重重量:">
          <el-input v-model.trim="packWeightInfo.weight" name="weight" :clearable="true" @keydown.enter.native="packWeightSave"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="
            showPackWeightDialog = false;
            packWeightInfo.weight = '';
            returnObject.weight = '';
          "
          ><i class="el-icon-circle-close"></i><span>取 消</span></el-button
        >
        <el-button type="primary" size="small" @click="packWeightSave"><i class="el-icon-check"></i><span>提 交</span></el-button>
      </span>
    </el-dialog>
    <!-- 设备登记 -->
    <el-dialog
      class="toolRegister"
      v-dragDirectives
      ref="dialog"
      title="设备登记"
      append-to-body
      :visible.sync="showEquipmentRegisterDialog"
      :close-on-click-modal="false"
      width="50%"
      :before-close="equipmentDialogClose"
    >
      <avue-form ref="equipmentForm" v-model="equipmentForm" :option="equipmentOption">
        <template slot-scope="" slot="equipmentCode">
          <div>
            <el-input
              v-model="equipmentForm.equipmentCode"
              name="equipmentCode"
              placeholder="请输入设备编码"
              :clearable="true"
              suffix-icon="iconfont iconicon_scan"
              @keydown.enter.native="registerEquipmentInfo"
            ></el-input>
          </div>
        </template>
      </avue-form>
      <avue-crud :data="equipmentList" :option="equipmentListOption">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-delete" size="small" type="text" @click="unbingingEquipment(row)">解除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="
            showEquipmentRegisterDialog = false;
            equipmentForm.equipmentCode = '';
          "
          ><i class="el-icon-circle-close"></i><span>关 闭</span></el-button
        >
      </span>
    </el-dialog>
    <!-- 工装治具登记 -->
    <el-dialog
      class="toolRegister"
      v-dragDirectives
      ref="dialog"
      title="工装治具登记"
      append-to-body
      :visible.sync="showToolRegisterDialog"
      :close-on-click-modal="false"
      width="50%"
      :before-close="toolDialogClose"
    >
      <avue-form ref="toolForm" v-model="toolForm" :option="toolOption">
        <template slot-scope="" slot="toolCode">
          <div>
            <el-input
              v-model="toolForm.toolCode"
              name="toolCode"
              placeholder="请输入工装治具编码"
              :clearable="true"
              suffix-icon="iconfont iconicon_scan"
              @keydown.enter.native="registerToolInfo"
            ></el-input>
          </div>
        </template>
      </avue-form>
      <avue-crud :data="toolList" :option="toolListOption">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-delete" size="small" type="text" @click="unbingingTool(row)">解除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="
            showToolRegisterDialog = false;
            toolForm.toolCode = '';
          "
          ><i class="el-icon-circle-close"></i><span>关 闭</span></el-button
        >
      </span>
    </el-dialog>
    <!-- 辅料登记 -->
    <el-dialog
      class="toolRegister"
      v-dragDirectives
      ref="dialog"
      title="辅料登记"
      append-to-body
      :visible.sync="showAccessoriesRegisterDialog"
      :close-on-click-modal="false"
      width="50%"
      :before-close="accessoriesDialogClose"
    >
      <avue-form ref="accessoriesForm" v-model="accessoriesForm" :option="accessoriesOption">
        <template slot-scope="" slot="accessoriesCode">
          <div>
            <el-input
              v-model="accessoriesForm.accessoriesCode"
              name="accessoriesCode"
              placeholder="请输入辅料编码"
              :clearable="true"
              suffix-icon="iconfont iconicon_scan"
              @keydown.enter.native="registerAccessoriesInfo"
            ></el-input>
          </div>
        </template>
      </avue-form>
      <avue-crud :data="accessoriesList" :option="accessoriesListOption">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-delete" size="small" type="text" @click="unbindingAccessoriesInfo(row)">解除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="
            showAccessoriesRegisterDialog = false;
            accessoriesForm.accessoriesCode = '';
          "
          ><i class="el-icon-circle-close"></i><span>关 闭</span></el-button
        >
      </span>
    </el-dialog>
    <!-- 不良登记 -->
    <el-dialog
      class="toolRegister"
      v-dragDirectives
      ref="dialog"
      title="不良登记"
      append-to-body
      :visible.sync="showFailureRegisterDialog"
      :close-on-click-modal="false"
      width="50%"
      @close="failureRegisterDialogClose"
    >
      <div class="sail-header-dialog-content">
        <avue-form ref="failureRegisterForm" v-model="failureRegisterForm" :option="failureRegisterOption">
          <template slot-scope="" slot="productSequenceNumber">
            <div>
              <el-input
                v-model="failureRegisterForm.productSequenceNumber"
                name="productSequenceNumber"
                placeholder="请输入产品序列号"
                :clearable="true"
                suffix-icon="iconfont iconicon_scan"
                @keydown.enter.native="goFailureCode"
              ></el-input>
            </div>
          </template>
          <template slot-scope="" slot="failureCode">
            <div>
              <el-input
                v-model="failureRegisterForm.failureCode"
                name="failureCode"
                placeholder="请输入不良现象代码"
                :clearable="true"
                suffix-icon="iconfont iconicon_scan"
                @keydown.enter.native="getFailureInfo"
              >
                <el-button slot="append" icon="el-icon-search" @click="openFailureCommonModal()"></el-button>
              </el-input>
            </div>
          </template>
          <template slot-scope="" slot="failureInfo">
            <div>
              <avue-select
                multiple
                clearable="false"
                class="failureNameSelect"
                popper-class="el-select_popperClass"
                v-model="failureInfoForm"
                placeholder="不良现象"
                :dic="failureInfoDic"
                :props="{
                  label: 'name',
                  value: 'code'
                }"
                @change="handleFailureNameDelete($event)"
                readonly="true"
              ></avue-select>
            </div>
          </template>
        </avue-form>
        <div style="width: 100%; text-align: right; margin-bottom: 50px">
          <el-button size="small" icon="el-icon-delete" @click="handleClear">清 空</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="failureRegister">提 交</el-button>
        </div>
        <!-- <avue-crud :data="failureRegisterList" :option="failureRegisterListOption">
          <template slot-scope="{ index }" slot="menu">
            <el-button icon="el-icon-delete" size="small" type="text" @click="delFailureRegister(index)">删除</el-button>
          </template>
        </avue-crud> -->
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="failureRegister"><i class="el-icon-check"></i><span>登 记</span></el-button>
        <el-button size="small" @click="showFailureRegisterDialog = false"><i class="el-icon-circle-close"></i><span>关 闭</span></el-button>
      </span> -->
    </el-dialog>
    <el-dialog title="附件上传" append-to-body :visible.sync="fileUploadBox" width="555px">
      <el-upload
        ref="fileUpload"
        class="upload-demo"
        drag
        multiple
        action="/api/blade-resource/oss/endpoint/put-file-attach"
        accept=".png,.jpg"
        list-type="picture"
        :headers="headersObj"
        :on-remove="removeFile"
        :on-preview="handlePreview"
        :on-success="pictureUploadSuccess"
        :before-upload="beforeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传png/jpg文件，每张不能大于150kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="fileUploadBox = false"><i class="el-icon-circle-close"></i><span>关 闭</span></el-button>
      </span>
    </el-dialog>
    <!-- 混包 -->
    <el-dialog
      class="toolRegister"
      ref="dialog"
      title="混包"
      append-to-body
      :visible.sync="showMixPackDialog"
      :close-on-click-modal="false"
      width="50%"
      @close="mixPackDialogClose"
    >
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>操作区</h4>
      </div>
      <avue-form v-if="showMixPackDialog" ref="mixPackForm" v-model="mixPackForm" :option="mixPackOption">
        <template slot-scope="" slot="mixPackSequenceNumber">
          <div>
            <el-input
              v-model="mixPackForm.mixPackSequenceNumber"
              name="mixPackSequenceNumber"
              placeholder="请输入产品序列号"
              :clearable="true"
              suffix-icon="iconfont iconicon_scan"
              @keydown.enter.native="submitSequenceNumber"
            ></el-input>
          </div>
        </template>
      </avue-form>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>已扫描的产品信息</h4>
      </div>
      <avue-crud v-if="showMixPackDialog" :data="mixPackProductList" :option="productInfoOption" :row-class-name="tableRowClassName">
        <template slot-scope="{ index }" slot="menu">
          <el-button icon="el-icon-delete" size="small" type="text" @click="delProductInfo(index)">删除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submitProductInfo"><i class="el-icon-check"></i><span>确 认</span></el-button>
        <el-button size="small" @click="showMixPackDialog = false"><i class="el-icon-circle-close"></i><span>关 闭</span></el-button>
      </span>
    </el-dialog>
    <el-dialog ref="dialog" title="信息填写" append-to-body :visible.sync="showBeforeRequestDialog" :close-on-click-modal="false" @close="beforeRequestDialogClose" width="30%">
      <!-- <avue-form v-if="showBeforeRequestDialog" ref="beforeRequestForm" v-model="beforeRequestForm" :option="beforeRequestOption"></avue-form> -->
      <el-form label-width="150px" label-position="right" :rules="beforeRequestRules">
        <template v-for="(item, index) in beforeRequestData">
          <el-form-item v-if="item.isEnterSubmit" :key="index" :label="item.name" :prop="item.code">
            <el-input v-model="returnObject[item.code]" :disabled="item.isDisabled" :name="item.code" @keydown.enter.native="beforeRequestSubmit"></el-input>
          </el-form-item>
          <el-form-item v-else :key="index" :label="item.name" :prop="item.code">
            <el-input v-model="returnObject[item.code]" :disabled="item.isDisabled" :name="item.code"></el-input>
          </el-form-item>
        </template>
      </el-form>
    </el-dialog>
    <!-- 工单上料 -->
    <el-dialog
      class="toolRegister"
      ref="dialog"
      title="工单上料"
      append-to-body
      :visible.sync="showWorkOrderFeedingDialog"
      :close-on-click-modal="false"
      width="50%"
      top="5vh"
      @close="workOrderFeedingDialogClose"
    >
      <avue-form v-if="showWorkOrderFeedingDialog" ref="workOrderFeedingForm" v-model="workOrderFeedingForm" :option="workOrderFeedingOption">
        <template slot-scope="" slot="packNo">
          <el-input
            v-model="workOrderFeedingForm.packNo"
            name="packNo"
            placeholder="请扫描原材料包装条码"
            :clearable="true"
            suffix-icon="iconfont iconicon_scan"
            @keydown.enter.native="workOrderFeedingSubmit(workOrderFeedingForm.packNo)"
          ></el-input>
        </template>
      </avue-form>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>工段用料信息</h4>
      </div>
      <avue-crud v-if="showWorkOrderFeedingDialog" :data="feedingInfoData" :option="feedingInfoOption"></avue-crud>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>上料详情</h4>
      </div>
      <avue-crud v-if="showWorkOrderFeedingDialog" :data="feedingDetailInfoData" :option="feedingDetailInfoOption"></avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showWorkOrderFeedingDialog = false"><i class="el-icon-circle-close"></i><span>关 闭</span></el-button>
      </span>
    </el-dialog>
    <!-- 工具上机 -->
    <el-dialog
      class="toolRegister"
      ref="dialog"
      title="工具上机"
      append-to-body
      :visible.sync="showToolOperateDialog"
      :close-on-click-modal="false"
      width="50%"
      @close="toolOperateDialogClose"
    >
      <avue-form v-if="showToolOperateDialog" ref="toolOperateForm" v-model="toolOperateForm" :option="toolOperateOption">
        <template slot-scope="" slot="machineCode">
          <div style="display: flex">
            <el-input
              v-model="toolOperateForm.machineCode"
              name="machineCode"
              placeholder="请扫描设备编码"
              :clearable="true"
              suffix-icon="iconfont iconicon_scan"
              @keydown.enter.native="verifyMachineCode"
            ></el-input>
            <el-button size="small" :disabled="!toolIsUseRecord" @click="findMachineUsageRecord()"><span>续前</span></el-button>
          </div>
        </template>
        <template slot-scope="" slot="toolType">
          <el-select v-model="toolOperateForm.toolType" placeholder="请选择工具类型" @change="changeToolType">
            <el-option v-for="item in toolTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
        <template slot-scope="" slot="toolCode">
          <el-input
            v-model="toolOperateForm.toolCode"
            name="toolCode"
            placeholder="请扫描设备编码"
            :clearable="true"
            suffix-icon="iconfont iconicon_scan"
            @keydown.enter.native="verifyTool"
          ></el-input>
        </template>
      </avue-form>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>工具采集列表</h4>
      </div>
      <avue-crud v-if="showToolOperateDialog" :data="toolOperateInfoData" :option="toolOperateInfoOption">
        <template slot-scope="{ row, index }" slot="menu">
          <el-button icon="el-icon-delete" size="small" type="text" :disabled="row.onlyShow" @click="delToolOperateInfo(index)">删除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showToolOperateDialog = false"><i class="el-icon-circle-close"></i><span>关 闭</span></el-button>
        <el-button type="primary" size="small" @click="submitToolOperateInfo"><i class="el-icon-check"></i><span>确 认</span></el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="toolRegister"
      ref="dialog"
      title="工具详情"
      append-to-body
      :visible.sync="showToolDetailDialog"
      :close-on-click-modal="false"
      width="50%"
      @close="toolDetailDialogClose"
    >
      <avue-form v-if="showToolDetailDialog" ref="toolDetailForm" v-model="toolDetailForm" :option="toolDetailOption"></avue-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showToolDetailDialog = false"><i class="el-icon-circle-close"></i><span>关 闭</span></el-button>
        <el-button type="primary" size="small" @click="detailStrategy"><i class="el-icon-check"></i><span>确 认</span></el-button>
      </span>
    </el-dialog>
    <stationui-dialog :dialogVisible.sync="showDialogUi" :dialogUiConfig="statiouiDialogConfig" :returnObject="returnObject"></stationui-dialog>
  </div>
</template>
<script>
import stationOpTemplate from './station-op-template.js';
export default {
  ...stationOpTemplate
};
</script>
<style scoped>
#registerInfoForm ::v-deep .avue-form__menu {
  display: none !important;
}
.registerInfoList ::v-deep .avue-crud__menu {
  display: none !important;
}
.showEsopDialog ::v-deep .el-dialog__body {
  height: 83%;
}
.titleIcon {
  display: flex;
  align-items: center;
}
::v-deep .el-table__body .row-red {
  background-color: red !important;
}
::v-deep .failureNameSelect .el-input__suffix {
  display: none;
}
@import './station-op-template.scss';
</style>
